<script lang="ts" setup>
import SideBar from '@/components/homeComponent/sideBar.vue'
import HeadBar from '@/components/homeComponent/headBar.vue'
import Breadcrumb from '@/components/homeComponent/breadcrumb.vue'
import useMainStore from '@/store'
import { computed, nextTick, ref } from 'vue'
import { useRoute } from 'vue-router'
import { getValInObj } from '@/assets/utils/utils'

const store = useMainStore(),
    routes = useRoute()
const collapsed = computed(() => store.collapsed)

let key = routes.fullPath.replace('/home/', ''),
    aside = ref<InstanceType<typeof SideBar>>()
nextTick(() => {
    store.handle_setTag(
        getValInObj('key', key, aside.value.tagList).title,
        routes.fullPath
    )
})

const layoutContentStyle = {
    margin: '24px 16px',
    padding: '24px',
    background: '#fff',
    minHeight: '280px',
    overflowY: 'scroll'
}
</script>

<template>
    <a-layout class="layout">
        <a-layout-sider
            v-model:collapsed="collapsed"
            :trigger="null"
            class="layout-sider"
            collapsible
        >
            <SideBar ref="aside" />
        </a-layout-sider>
        <a-layout>
            <a-layout-header class="layout-header mb-2">
                <HeadBar />
            </a-layout-header>
            <Breadcrumb v-if="store.navTagList.length" />
            <a-layout-content :style="layoutContentStyle">
                <div>
                    <router-view v-slot="{ Component }">
                        <transition name="fade">
                            <keep-alive>
                                <component :is="Component"></component>
                            </keep-alive>
                        </transition>
                    </router-view>
                </div>
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>

<style lang="scss" scoped>
.layout {
    width: 100vw;
    height: 100vh;

    &:deep(.ant-layout-content) {
        margin: 0 16px 24px 16px !important;
    }

    .layout-sider {
    }

    .layout-header {
        background: #ffffff;
        padding: 0;

        .user-bar {
        }

        .trigger {
            margin-left: 20px;
        }
    }
}
</style>
